<template>
    <basic-container>
        <TitleComponent mainTitle="操作日志" subTitle="列表" />

        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" ref="crud" @row-del="rowDel" @selection-change="selectionChange" @on-load="onLoad">
            <template #test="{ row }">
                <el-tag type="success" v-if="row.test === 'GET'">{{ row.test }}</el-tag>
                <el-tag type="primary" v-else>{{ row.test }}</el-tag>
            </template>
            <template #test2="{ row }">
                <div>{</div>
                <div>{{ row.test2 }}</div>
                <div>}</div>
            </template>
            <template #menu="{ row }">
                <el-dropdown @command="(command) => handleCommand(command, row)">
                    <el-icon style="rotate: 90deg;cursor: pointer" size="20">
                        <More />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="delete">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
            <template #menu-left="{ row }">
                <el-button class="btn" type="danger" @click="delsHandler" v-if="ids.length">
                    批量删除
                </el-button>
            </template>
        </avue-crud>
        <el-dialog v-model="crudData.confirmDeleteVisible" title="" width="440" destroy-on-close center
            class="custom-dialog">
            <div class="swal2-header">
                <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
                <div class="swal2_fs">确认删除？</div>
            </div>
            <div class="swal2_he">ID - {{ crudData.delIds }}</div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button color="#488C6D" class="btn btn-primary" @click="handleDeleteConfirm">
                        确认
                    </el-button>
                    <el-button class="btn" type="" @click="handleDeleteCancel">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, reactive, ref } from 'vue';
// import {getList} from "@/api/user/overview.js";
import TitleComponent from '@/components/title/index.vue';
const ids = computed(() => (crudData.selectionList.map(item => item.ID)))

const crud = ref('')

let option: any = reactive({
    rowKey: 'id', // 使用expand属性时必须配置rowKey为你行数据的主键，不能重复
    height: 'auto',
    // calcHeight: 100,
    searchIcon: true,
    searchShow: true,
    searchMenuSpan: 6,
    searchMenuPosition: 'right',
    tip: false,
    border: true,
    index: false,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    addBtn: false,
    menuWidth:100,
    dialogWidth: '40%',
    menuFixed: 'right',
    // labelWidth: 130,
    menu: true,
    selection: true,
    // searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    indexWidth: 60,
    column: [
        {
            label: "ID",
            prop: "ID",
            sortable: true,
            span: 24,
        },
        {
            label: "用户",
            prop: "account",
            search: true,
            span: 24,
        },
        {
            label: "方法",
            prop: "test",
            search: true,

            span: 24,
        },
        {
            label: "路径",
            prop: "path",
            span: 24,
            search: true,

        },
        {
            label: "IP",
            prop: "test1",
            span: 24,
            search: true,

        },
        {
            label: "输入",
            prop: "test2",
            width: 200,
            span: 24,
        },
        {
            label: "创建时间",
            prop: "test3",
            searchSpan: 8,
            type: 'datetime',
            searchType: 'datetimerange',
            search: true,

            span: 24,
        },
    ]
})
let crudData: any = reactive({
    delIds:'',
    confirmDeleteVisible: false,
    selectionList: [],
    loadingSubmit: false,
    loadingSave: false,
    index_unit: [],
    loading: true,
    active: 1,
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    filedArr: [],
    data: []
})
const selectionChange = (list) => {
    crudData.selectionList = list
}
const delsHandler = () => {
    if (crudData.selectionList.length === 0) {
        ElMessage.warning('请选择至少一条数据');
        return;
    }
    crudData.confirmDeleteVisible = true
    let id = ids.value
    console.log('ids',ids);
    
    crudData.delIds = id.join(',')
}

const handleDeleteCancel = () => {
    crudData.confirmDeleteVisible = false;
};

const handleDeleteConfirm = () => {
    crudData.confirmDeleteVisible = false;

};
const handleCommand = (command, row) => {
    crudData.rowData = row
    if (command === 'delete') {
        crudData.confirmDeleteVisible = true;
        crudData.delIds = row.id
    }
};

// 删除
const rowDel = (form, index, done) => {
    ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            ElMessage.success("删除成功");
            done(form); // 删除逻辑，此处暂未实现删除功能
        })
        .catch(() => { });
};

const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            ID: '9411',
            account: '源码商城ymeso.com',
            test: 'GET',
            path: 'ymfxz/auth/operation-logs',
            test1: '142.4.117.3 ',
            test2: '"filter-ip": "45.142.158.236"',
            test3: '2024-07-05 23:38:44',
        },
        {
            ID: '9412',
            account: '源码商城ymeso.com',
            path: 'ymfxz/auth/operation-logs',
            test: 'GET',
            test1: '142.4.117.3 ',
            test2: '"filter-ip": "45.142.158.236"',
            test3: '2024-07-05 23:38:44',
        },
    ]
    crudData.page.total = crudData.data.length;

    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //      crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss">
.custom-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swal2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.swal2-icon {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 1.25em auto 1.875em;
    zoom: normal;
    border: 0.25em solid transparent;
    border-radius: 50%;
    line-height: 5em;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.swal2-icon.swal2-question::before {
    content: "?";
}

.swal2-icon::before {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92%;
    font-size: 3.75em;
}

.swal2-icon.swal2-question {
    border-color: #c9dae1;
    color: #87adbd;
}

.swal2_fs {
    margin: 0 0 0.4em;
    padding: 0;
    font-size: 25px;
    color: #595959;
    text-align: center;
    font-weight: 400 !important;
}

.swal2_he {
    text-align: center;
    color: #545454;
    font-size: 1.125em;
    font-weight: 300;
    line-height: normal;
    word-wrap: break-word;
}
</style>